<template>
    <div class="main">
        <div>
            <router-view></router-view>
        </div>
        <div class="tabbar">
            <van-tabbar v-model="active" route active-color="green">
                <van-tabbar-item v-for="(item, index) in TabbarData" ::key="index" :to="{ name: item.name }">
                    <span>{{ item.title }}</span>
                    <template #icon="props">
                        <!-- <img :src="props.active ? icon.active : icon.inactive" /> -->
                        <van-icon :name="props.active ? item.active : item.inactive" />
                    </template>
                </van-tabbar-item>
            </van-tabbar>
        </div>
    </div>
</template>

<script>
export default {
    name: "Main",
    data() {
        return {
            active: 0,
            TabbarData: [
                {
                    title: "书城",
                    active: "graphic",
                    inactive: "label-o",
                    name: "Bookstore",
                },
                {
                    title: "书架",
                    active: "column",
                    inactive: "description",
                    name: "Shelf",
                },

                {
                    title: "分类",
                    active: "wap-nav",
                    inactive: "apps-o",
                    name: "Sort",
                },
                {
                    title: "视频",
                    active: "play-circle",
                    inactive: "play-circle-o",
                    name: "Video",
                },
                {
                    title: "我的",
                    active: "friends",
                    inactive: "friends-o",
                    name: "My",
                },
            ],
        };
    },
};
</script>

<style lang="less" scoped>
.main {
    width: 100%;
    height: 50px;
    position: fixed;
    bottom: 0;
    .tabbar {
        height: 50px;
    }
}
</style>
